<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的试卷</title>
    <link rel="icon" href="image/网页图标.png" type="image/x-icon">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/top.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="12%">
            <top @getuser="user">
            </top>
        </el-header>
        <el-main>
            <div class="c900 h100">
                <el-container class="h100 flex" style="flex-direction: column">
                    <div class="t22 f">
                        <el-input v-model="search" placeholder="请输入标题"></el-input>
                        <el-button type="primary" plain @click="query">搜索</el-button>
                    </div>
                    <div style="flex-grow: 1; width: 100%; overflow-y: auto" >
                        <el-card v-for="p in page.records" style="margin-bottom: 8px">
                            <div slot="header" class="flex">
                                <b>{{p.title}}</b>
                                <div>
                                    <el-button @click="location='exam.html?look&id='+p.id" style="padding: 3px 0" type="text">查看</el-button>
                                    <el-button style="padding: 3px 0" type="text" @click="del(p.id)">删除</el-button>
                                </div>
                            </div>
                            <div class="grid4" style="grid-template-columns: 10% 30% 10% 40%">
                                <label>考试类型：</label><span>完全公开</span>
                                <label>总分：</label><span>{{p.scoreTotal}}</span>
                                <label>考试时间：</label><span>{{new Date(p.begin).toLocaleString()}}~{{new Date(p.end).toLocaleString()}}</span>
                                <label>考试时长：</label><span>{{p.time}}分钟</span>
                            </div>
                        </el-card>
                    </div>
                    <el-pagination style="text-align: right; width: 100%;margin-bottom: 10px"
                                   background
                                   layout="prev, pager, next"
                                   :page-size="page.size"
                                   :current-page="page.current"
                                   @current-change="getPage"
                                   :total="page.total">
                    </el-pagination>
                </el-container>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            uid: '',
            search:'',
            page:{current:0, size:4, records:[]}
        },
        watch: {
            uid(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.query();
                }
            }
        },
        methods:{
            //组件自定义方法
            user(info) {
                this.uid = info.id;
            },
            query(){
                axios.post(`cloud-other/paper/query?current=${this.page.current}&size=${this.page.size}&search=${this.search}&uid=${this.uid}`).then(res=>{
                    this.page = res.data;
                });
            },
            getPage(newPage){
                this.page.current = newPage;
                this.query();
            },
            del(id){
                // 弹出确认框
                if (confirm("确定要删除该试卷吗？")) {
                    //开始删除
                    axios.get("cloud-other/paper/del?id=" + id).then(res=>{
                        if(res.data.code == 1){
                            this.$message(res.data.msg);
                            this.query();
                        }else{
                            this.$alert(res.data.msg);
                        }
                    });
                } else {
                    // 如果用户点击了"取消"，则不执行任何操作
                    this.$message('取消');
                }
            }
        },
        created(){

        }

    })
</script>
<style>
    html, body, #app {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .el-container{
        width: 100%;
        height: 100%;
    }
    .el-header{
        width: 100%;
        padding: 0%;
    }

    /* 卡片 */
    .c1{
        width: 100%;
        height: 100%;
        font-size: 35px;
    }

    /* 弹出 */
    .d1{
        width: 200px;
        height: 400px;
        position: absolute;
        z-index: 100;
        left: 10%;
    }

    /* 浮动 */
    .f{
        float: left;
    }
    .r{
        float: right;
    }

    .i1{
        position: relative;
        top: -15px;
    }

    .p1{
        margin: 8px 10px 0 10px;
        text-decoration: none;
        color: #333333;
    }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
    .c900{
        width: 1000px;
        margin: auto;
    }
    .title{
        background-color: #0a699999;
        color: #fff;
    }
    .title *{
        color: #fff;
    }
    .flex{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        gap: 10px;
    }
    .flex>*{
        margin: 0px;
        padding: 0px;
    }
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    nav{
        display: flex;
        height: 100%;
    }
    nav .el-link{
        padding-inline: 20px;
        font-size: 1em;
    }
    nav .el-link:hover{
        background-color: #99f7;
    }
    .hsc:hover{
        transform: scale(1.1);
        box-shadow: 3px 3px 3px 3px #8888;
    }
    .grid2,.grid3,.grid4{
        gap: 10px;
    }
    .grid2{
        display: grid;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    .h100{
        height: 100%;
    }
    small{
        font-size: .7em;
        color: #989
    }
    .t22{
        display: flex;
        align-items: center; /* 可选，用于垂直居中 */
    }
</style>

</html>